import { createRouter, createWebHashHistory } from "vue-router";
import { routes } from "vue-router/auto-routes";
const baseUrl = ref(import.meta.env.VITE_APP_BASE_API);
import api from "@/api";
import { ref } from "vue";
const menus = ref([]);

const getMenus = async () => {
  if (menus.value.length == 0) {
    const res = await api.menus.getMenus()
    // const res = {
    //   menus: [
    //     {
    //       id: 1,
    //       name: "系统管理",
    //       icon: "",
    //       path: "/system-manage",
    //       svg: "/src/svg/system-manage/index.svg",
    //       title: "系统管理",
    //       sort: 1,
    //       father: 0,
    //     },
    //     {
    //       id: 2,
    //       name: "用户管理",
    //       icon: "",
    //       path: "/system-manage/user-manage",
    //       svg: "/src/svg/system-manage/user-manage/index.svg",
    //       title: "用户管理",
    //       sort: 1,
    //       father: 1,
    //     },
    //     {
    //       id: 3,
    //       name: "角色管理",
    //       icon: "",
    //       path: "/system-manage/role-manage",
    //       svg: "/src/svg/system-manage/role-manage/index.svg",
    //       title: "角色管理",
    //       sort: 2,
    //       father: 1,
    //     },
    //     {
    //       id: 4,
    //       name: "菜单管理",
    //       icon: "",
    //       path: "/system-manage/menu-manage",
    //       svg: "/src/svg/system-manage/menu-manage/index.svg",
    //       title: "菜单管理",
    //       sort: 3,
    //       father: 1,
    //     },
    //     {
    //       id: 6,
    //       name: "财务管理",
    //       icon: "",
    //       path: "/financial-manage",
    //       svg: "/src/svg/financial-manage/index.svg",
    //       title: "财务管理",
    //       sort: 4,
    //       father: 0,
    //     },
    //   ],
    // };
    menus.value = res.menus;
  }
  return menus.value;
};

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

const whileList = ["/", "/login", "/404"];

const tokenValid = () => {
  const token = localStorage.getItem("token");
  const expiresIn = localStorage.getItem("expiresIn");
  if (!token || !expiresIn) {
    return false;
  }
  if (Date.now() > expiresIn) {
    return false;
  }
  return true;
};

const beforeNext = async (to, from, next) => {
  const menus = await getMenus();
  let nextPage;
  menus.forEach((menu) => {
    if (menu.path == to.path) { nextPage = menu }
  });
  if (!nextPage) { next(`/404?redirect=${from.path}`);
  } else {
    document.title = nextPage.title;
    const oldLink = document.querySelector('link[rel="icon"]');
    const newLink = document.createElement("link");
    newLink.rel = "icon";
    newLink.type = "image/svg+xml"
    newLink.href = baseUrl.value + nextPage.svg;
    document.getElementsByTagName("head")[0].appendChild(newLink);
    if (oldLink) {
      oldLink.parentNode.removeChild(oldLink);
    }
    next();
  }
};

router.beforeEach((to, from, next) => {
  if (whileList.includes(to.path)) {
    next();
  } else {
    if (tokenValid()) {
      beforeNext(to, from, next);
    } else {
      next("/login");
    }
  }
});

export default router;
